<template>
  <div class="errPage-container">
    <div style="padding-bottom:10px">
              <p>1.0 vue中的key的作用是什么</p>
              <p style="padding-left:10px">为了更加高效的更新虚拟DOM  为啥更高效 </p>
              <p style="padding-left:10px">如果我们用index做key 或者不传key 我们对数据做push操作影响不大 但是如果我们unshif或者split 问题就出来 更新的范围就大了没有key 还会出一些莫名的bug </p>
              <p style="padding-left:10px">我们判断是否是同一个元素有两个依据  sel(选择器)和key(唯一标识)都相同 没有key那就是默认的 undefined  undefined==undefined 在比较内容有没有更新
                  sel 和key用来 判断是否是同一个虚拟节点  如果是同一个虚拟节点 在进行新旧虚拟节点的比较
              </p>
    
    </div>
    <div style="padding-bottom:10px">
      <p>2.0 vue中的nextTrick的原理</p>
      <p style="padding-left:10px">    this.key = 'new val，触发依赖通知更新，将负责更新的 watcher 放入 watcher 队列 </p>
      <p style="padding-left:10px">    将刷新 watcher 队列的函数放到 callbacks 数组中 </p>
      <p style="padding-left:10px">    在浏览器的异步任务队列中放入一个刷新 callbacks 数组的函数 </p>
      <p style="padding-left:10px">    Vue.nextTick(cb) 来插队，将 cb 函数放入 callbacks 数组  </p>
      <p style="padding-left:10px">    待将来的某个时刻执行刷新 callbacks 数组的函数 </p>
      <p style="padding-left:10px">    然后执行 callbacks 数组中的众多函数，触发 watcher.run 的执行，更新 DOM </p>
      <p style="padding-left:10px">    由于 cb 函数是在后面放到 callbacks 数组，所以这就保证了先完成的 DOM 更新，再执行 cb 函数 </p>

    </div>
    <div style="padding-bottom:10px">
      <p>3.0 vue中的keep-aliev的原理</p>
      <p style="padding-left:10px"> keep-alive是一个组件，这个组件中有三个属性，分别是include、exclude、max，在created中创建缓存列表和缓存组件的key列表，
        销毁的时候会做一个循环销毁清空所有的缓存和key，当mounted时会监控include 和 include属性，进行组件的缓存处理。
        如果发生变化会动态的添加和删除缓存。渲染的时候会去拿默认插槽，只缓存第一个组件，取出组件的名字，判断是否在缓存中，
        如果在就缓存，不在就直接return掉，缓存的时候，如果组件没有key，就自己通过组件的标签、key和cid拼接一个key。
        如果该组件缓存过，就直接拿到组件实例。如果没有缓存过就把当前的vnode缓存，和key做一个对应关系。这里面有一个算法叫LRU，
        如果有key就不停的取，如果超限了就采用LRU进行删除最近最久未使用的，从前面删除，LRU就是将当前使用的往数组的后面移，
        在最前面的就是最久未使用的。 
         </p>
    </div>
    <div style="padding-bottom:10px">
      <p>4.0   Vue 的初始化过程（new Vue(options)）都做了什么？</p>
         <p style="padding-left:10px">   处理组件配置项 </p>
         <p style="padding-left:10px">  初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上</p>
         <p style="padding-left:10px">  初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率</p>
          <p style="padding-left:10px"> 组件关系关系属性的初始化，比如 $parent、$children、$root、$refs 等 处理自定义事件</p>
           <p style="padding-left:10px"> 初始化插槽 </p>
           <p style="padding-left:10px">调用 beforeCreate 钩子函数</p>
           <p style="padding-left:10px">初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行浅层的响应式处理（只处理了对象第一层数据），并代理每个 key 到 vm 实例上</p>
          <p style="padding-left:10px"> 数据响应式，处理 props、methods、data、computed、watch 等选项</p>
          <p style="padding-left:10px"> 解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上</p>
          <p style="padding-left:10px"> 调用 created 钩子函数 </p>
          <p style="padding-left:10px"> 如果发现配置项上有 el 选项，则自动调用 $mount 方法，也就是说有了 el 选项，就不需要再手动调用 $mount 方法，反之，没提供 el 选项则必须调用 $mount </p>
           <p style="padding-left:10px">  接下来则进入挂载阶段 </p>
    </div>
    <div style="padding-bottom:10px">
      <p>
        5.0 父组件里面写了子组件 其时间是 谁在监听
        其实是子组件在监听 谁触发谁监听的 不是父组件在监听
        <!-- <com @click="handClickFm"></com>  -->
      </p>
    </div>

    <div style="padding-bottom:10px">
      <p style="padding-left:0px">
        6.0 provide+inject 主要应用在高级组件和组件库的使用上
        子组件从祖代组件中拉去数据
      </p>
      <p style="padding-left:10px">
             子组件从祖代组件中拉去数据
      </p>
    </div>


  </div>
</template>

<script>
export default {
  name: "ErrorLog",
  components: {}
};
</script>

<style scoped>
.errPage-container {
  padding: 30px;
}
</style>
